<!-- Main navigation container -->
<template>
  <nav
    class="flex-no-wrap relative flex w-full items-center justify-between bg-[#FBFBFB] py-2 shadow-md shadow-black/5 dark:bg-neutral-600 dark:shadow-black/10 lg:flex-wrap lg:justify-start lg:py-4"
    data-te-navbar-ref
  >
    <div class="flex w-full flex-wrap items-center justify-between px-3">
      <!-- Hamburger button for mobile view -->
      <button
        class="block border-0 bg-transparent px-2 text-neutral-500 hover:no-underline hover:shadow-none focus:no-underline focus:shadow-none focus:outline-none focus:ring-0 dark:text-neutral-200 lg:hidden"
        type="button"
        data-te-collapse-init
        data-te-target="#navbarSupportedContent1"
        aria-controls="navbarSupportedContent1"
        aria-expanded="false"
        aria-label="Toggle navigation"
      >
        <!-- Hamburger icon -->
        <span class="[&>svg]:w-7">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="h-7 w-7">
            <path
              fill-rule="evenodd"
              d="M3 6.75A.75.75 0 013.75 6h16.5a.75.75 0 010 1.5H3.75A.75.75 0 013 6.75zM3 12a.75.75 0 01.75-.75h16.5a.75.75 0 010 1.5H3.75A.75.75 0 013 12zm0 5.25a.75.75 0 01.75-.75h16.5a.75.75 0 010 1.5H3.75a.75.75 0 01-.75-.75z"
              clip-rule="evenodd"
            />
          </svg>
        </span>
      </button>

      <!-- Collapsible navigation container -->
      <div class="!visible hidden flex-grow basis-[100%] items-center lg:!flex lg:basis-auto" id="navbarSupportedContent1" data-te-collapse-item>
        <!-- Left navigation links -->
        <ul class="list-style-none mr-auto flex flex-col pl-0 lg:flex-row" data-te-navbar-nav-ref>
          <template v-for="(item, index) in list" :key="index">
            <li class="mb-4 lg:mb-0 lg:pr-2" data-te-nav-item-ref>
              <a
                class="text-neutral-500 transition duration-200 hover:text-neutral-700 hover:ease-in-out focus:text-neutral-700 disabled:text-black/30 motion-reduce:transition-none dark:text-neutral-200 dark:hover:text-neutral-300 dark:focus:text-neutral-300 lg:px-2 [&.active]:text-black/90 dark:[&.active]:text-neutral-400"
                :href="item.url"
                data-te-nav-link-ref
                target="_blank"
              >
                {{ item.name }}
              </a>
            </li>
          </template>
        </ul>
      </div>
      <div class="relative mr-3">
        <input
          type="search"
          id="location-search"
          v-model="searchkey"
          class="z-20 block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:border-l-gray-700 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500"
          placeholder="i问财"
          required
        />
        <button
          type="submit"
          @click="search"
          class="absolute right-0 top-0 h-full rounded-r-lg border border-blue-700 bg-blue-700 p-2.5 text-sm font-medium text-white"
        >
          <svg class="h-4 w-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z" />
          </svg>
          <span class="sr-only">Search</span>
        </button>
      </div>
      <div>
        <span class="countdown font-mono text-4xl">
          <span :style="{ '--value': counter }"></span>
        </span>
        <label class="relative mx-5 inline-flex cursor-pointer items-center">
          <input type="checkbox" value="" class="peer sr-only" checked v-model="autoFresh" @change="change()" />
          <div
            class="peer h-6 w-11 rounded-full bg-gray-200 after:absolute after:left-[2px] after:top-0.5 after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-red-600 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:ring-4 peer-focus:ring-red-500"
          ></div>
          <span class="ml-3 text-sm font-semibold">自动刷新</span>
        </label>
      </div>
    </div>
  </nav>
</template>
<script setup>
const list = [
  {
    name: '选股宝',
    url: 'https://xuangubao.cn/',
  },
  {
    name: '财联社',
    url: 'https://www.cls.cn/finance',
  },
  {
    name: '同花顺',
    url: 'http://10jqka.com.cn/',
  },
  {
    name: '东方财富',
    url: 'https://www.eastmoney.com/',
  },
  {
    name: '淘股吧',
    url: 'https://www.taoguba.com.cn/',
  },
  {
    name: '问财',
    url: 'http://www.iwencai.com/',
  },
  {
    name: '复盘网',
    url: 'https://www.fupanwang.com/',
  },
  {
    name: '华尔街见闻',
    url: 'https://wallstreetcn.com/',
  },
  {
    name: '英为财情',
    url: 'https://cn.investing.com/',
  },
  {
    name: '经传行情',
    url: 'https://www.n8n8.cn/hangqing/',
  },
  // {
  //   name: '阿牛智投',
  //   url: 'https://www.aniu.com/'
  // },
  // {
  //   name: '富途牛牛',
  //   url: 'https://www.futunn.com/quote/cn?_ftsdk=1692354140294902&global_content=%7B%22promote_id%22%3A13766,%22sub_promote_id%22%3A3%7D'
  // },
];

import { onMounted, ref, inject, onUnmounted } from 'vue';
const searchkey = ref('');
const countdown = inject('$countdown') / 1000;
const counter = ref(countdown);
const autoFresh = ref(true);
const emit = defineEmits(['change']);
let t;
function count() {
  t = setInterval(() => {
    if (counter.value > 0) {
      counter.value--;
    } else {
      emit('change', autoFresh.value);
      counter.value = countdown;
    }
  }, 1000);
}
// const hiddenProperty = 'hidden' in document ? 'hidden' : 'webkitHidden' in document ? 'webkitHidden' : 'mozHidden' in document ? 'mozHidden' : null;
// const visibilityChangeEvent = hiddenProperty.replace(/hidden/i, 'visibilitychange');
// const onVisibilityChange = function () {
//   if (!document[hiddenProperty]) {
//     window.location.reload();
//   } else {
//     if (t) {
//       clearInterval(t);
//     }
//   }
// };

onMounted(() => {
  // document.addEventListener(visibilityChangeEvent, onVisibilityChange);
  init();
});
function search() {
  if (searchkey.value) {
    window.open('http://www.iwencai.com/unifiedwap/result?w=' + searchkey.value);
  }
}
function init() {
  let auto = checkAuto();
  if (auto) {
    autoFresh.value = true;
    count();
  } else {
    autoFresh.value = false;
  }
}
onUnmounted(() => {
  // document.removeEventListener(visibilityChangeEvent, {});
});

//检查是否开启自动刷新
function checkAuto() {
  let current = new Date();
  let time = current.getTime();
  let week = current.getDay();
  if (week == 0 || week == 6) {
    return false;
  }
  let day = current.toLocaleDateString();
  let t1 = new Date(day + ' 09:25').getTime();
  let t2 = new Date(day + ' 11:30').getTime();
  let t3 = new Date(day + ' 13:00').getTime();
  let t4 = new Date(day + ' 15:00').getTime();

  if (time < t1 || time > t4 || (time > t2 && time < t3)) {
    return false;
  } else {
    return true;
  }
}

function change() {
  if (autoFresh.value) {
    // counter.value = countdown
    count();
  } else {
    clearInterval(t);
  }
}
</script>
<style>
:root .countdown {
  line-height: 1em;
}

.countdown {
  display: inline-flex;

  & > * {
    height: 1em;
    @apply inline-block overflow-y-hidden;

    &:before {
      position: relative;
      content: '00\A 01\A 02\A 03\A 04\A 05\A 06\A 07\A 08\A 09\A 10\A 11\A 12\A 13\A 14\A 15\A 16\A 17\A 18\A 19\A 20\A 21\A 22\A 23\A 24\A 25\A 26\A 27\A 28\A 29\A 30\A 31\A 32\A 33\A 34\A 35\A 36\A 37\A 38\A 39\A 40\A 41\A 42\A 43\A 44\A 45\A 46\A 47\A 48\A 49\A 50\A 51\A 52\A 53\A 54\A 55\A 56\A 57\A 58\A 59\A 60\A 61\A 62\A 63\A 64\A 65\A 66\A 67\A 68\A 69\A 70\A 71\A 72\A 73\A 74\A 75\A 76\A 77\A 78\A 79\A 80\A 81\A 82\A 83\A 84\A 85\A 86\A 87\A 88\A 89\A 90\A 91\A 92\A 93\A 94\A 95\A 96\A 97\A 98\A 99\A';
      white-space: pre;
      top: calc(var(--value) * -1em);
    }
  }
}
</style>
